import React from 'react';
import { HeaderNav, FooterCourse, MediaPlayer, YuyueModal } from 'components'
import LongBanner from './components/longBanner'
import LongDesc from './components/longDesc'
import LongCourse from './components/longCourse'
import LongLevel from './components/longLevel'
import LongSystem from './components/longSystem'
import LongTeamExpert from './components/longTeamExpert'
import _LongTeamExpert from './components/_longTeamExpert'
import OriginalSound from './components/originalSound'
import http from 'libs/http'
import './index.less'
import Helmet from 'react-helmet';
import { _alert } from 'libs/utils'
import { withContext } from 'libs/context'

class Long_english extends React.Component {

  constructor(props) {
    super(props)
    this.state = {
      engList: [],
      showYuyueModal: false,
      courseData: {},
      videoUrl: '',
      showVideo: false,
      videoTitle: '',
      authority: '',
    }
  }

  componentDidMount() {
    this.checkRoleType()
    this.getAuditionsCourseList()
  }

  componentWillReceiveProps(nextProps) {
    // console.log('%c nextProps', 'color: red;', nextProps)
    // this.setState({
    //   authority: nextProps.context.authority
    // })
  }

  checkRoleType = () => {
    http.get('/role/getRole').then(res => {
      res.data && this.setState({
        authority: res.data
      })
    })
  }

  // getAuditionsCourseList() {
  //   http.get('/student/business/getAuditionsCourseListH5').then(res => {
  //     res.data.map(item => {
  //       if(item.title === '英语') {
  //         this.setState({ engList: item.courses })
  //       }
  //     })
  //   })
  // }
  getAuditionsCourseList() {
    http.get('/student/common/getAuditionsCourseList').then(res => {
      this.setState({ engList: res.data })
    })
  }
  

  handleSubscribe = (course) => () => {
    const { authority } = this.state
    const { history } = this.props
    if(authority !== 'STUDENT') {
      // _alert('用户未登录，点击确定跳转登录页面').close(()=>{
      //   history.push('/student/password_login')
      // })
      history.push('/student/password_login')
    }else {
      // this.setState({
      //   showYuyueModal: true,
      //   courseData: course
      // })
      history.push('/student_center/free_classes/layout/free')
    }
  }

  handleClick = () => {
    const { authority } = this.state
    const { history } = this.props
    if(authority !== 'STUDENT') {
      // _alert('用户未登录，点击确定跳转登录页面').close(()=>{
      //   history.push('/student/password_login')
      // })
      history.push('/student/password_login')
    }else {
      history.push('/student_center/free_classes/layout/free')
    }
  }

  getVideoUrl = (code, title='英语原声绘本') => {
    const url = '/student/common/getPublicByCode?code='+code;
    http.get(url).then(res => {
      const videoUrl = res.data.TV_URL;
      this.setState({ videoUrl, showVideo: true, videoTitle: title });
    })
  }
  // 原生绘本点击立即解锁
  handleButtonClick = () => {
    const { authority } = this.state
    const { history } = this.props
    if(authority !== 'STUDENT') { // 用户未登录，点击确定跳转登录页面
      history.push('/student/password_login')
    }else {
      history.push('/student_center/original_sound/layout/1')
    }
  }
  // {
  //   "courseId": 8,
  //   "picUrl": "http://zilong-bucket.oss-cn-beijing.aliyuncs.com/zilong/pic/COURSE/desc/KC_UbhDov_1548129606218/2019-04-08/1554697016789.jpg?Expires=1561359471&OSSAccessKeyId=LTAILu6zWD5eG2SO&Signature=idPuToeefbIw6vo9DxrVBP3Maos%3D",
  //   "courseName": "英语外教在线一对二试听课",
  //   "courseDesc": "专属英美外教一对二，剑桥国际英语教材+经典故事绘本、视频，省钱又高效！"
  // },
  render() {
    const { engList, showYuyueModal, courseData, videoUrl, videoTitle, showVideo } = this.state
    return (
      <div className="long-english-container">
        <Helmet title="龙英语" />
        <HeaderNav history={this.props.history} />

        <LongBanner handleClick={this.handleClick} />
        <LongDesc />
        <LongCourse />
        <LongLevel />
        <div className="long-free-course">
          <h2>免费试听课</h2>
          <h4>购买课程，免费解锁300+原声绘本</h4>
          <div>
            {engList.map(eng => (
              <div className="free-course-item" key={eng.courseId}>
                <img src={eng.picUrl} />
                <p>{eng.courseName}</p>
                <span>{eng.courseDesc}</span>
                <span className="subscribe-btn" onClick={this.handleSubscribe(eng)}>免费试听</span>
                {/* <span className="subscribe-btn" onClick={this.handleSubscribe(eng)}>立即预约</span> */}
            </div>
            ))}
            {/* {engList.map(eng => (
              <div className="free-course-item" key={eng.id}>
                <img src={eng.courseFile} />
                <p>{eng.name}</p>
                <i>{eng.courseDesc}</i>
                <span className="subscribe-btn" onClick={this.handleSubscribe(eng)}>免费试听</span>
                <span className="subscribe-btn" onClick={this.handleSubscribe(eng)}>立即预约</span>
            </div>
            ))} */}
          </div>
        </div>
        <LongSystem />
        <OriginalSound getVideoUrl={this.getVideoUrl} handleButtonClick={this.handleButtonClick}/>
        <_LongTeamExpert />

        <YuyueModal
          visible={showYuyueModal}
          courseData={courseData}
          closeYuyueModal={()=>{this.setState({showYuyueModal: false})}}
        />

        <FooterCourse />

        <MediaPlayer
          src={videoUrl}
          show={showVideo}
          title={videoTitle}
          onCancel={()=>{this.setState({ showVideo: false, videoUrl: '', videoTitle })}}
        />
      </div>
    )
  }
}

export default withContext('authority')(Long_english)
